<template>
    <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        class="al-custom-menu"
        :theme="theme"
        :mode="mode"
    >
        <template v-for="item in menuList" :key="item.key">
            <a-menu-item
                v-if="!item.children || !item.children.length"
                :key="item.key"
                :title="item.title"
                class="first-level"
                @click="hanldeClickMenu(item)"
            >
                <template v-if="item.iconDisplay">
                    <img
                        v-if="item.iconType === 'CUSTOM' || item.icon?.startsWith('data:image')"
                        class="anticon icon-style"
                        :src="item.icon"
                    />
                    <component v-else-if="item.icon" class="anticon icon-style" :is="item.icon" />
                </template>
                <span>{{ item.title || item.name }}</span>
            </a-menu-item>
            <sub-menu v-else :key="item.key" :menu-info="item" :router-push-key="routerPushKey" />
        </template>
    </a-menu>
</template>

<script lang="ts">
    import { defineComponent, ref, watch, PropType } from 'vue'
    import SubMenu from './SubMenu'
    import { setStorage } from '@/utils/common'
    import { CURRENT_URL } from '@/enums/cacheEnum'
    import type { MenuProps } from 'ant-design-vue'
    import { useRouter } from 'vue-router'
    export default defineComponent({
        name: 'CustomMenu',
        components: {
            SubMenu
        },
        props: {
            theme: {
                type: String,
                default: 'dark' // light dark custom
            },
            mode: {
                type: String,
                default: 'inline' // vertical vertical-right horizontal inline
            },
            menuList: {
                // 菜单列表
                type: Array,
                default: () => []
            },
            routerPushKey: {
                type: String,
                default: 'path'
            },
            // 展开的key
            menuExpandedKeysHot: {
                type: Array as PropType<MenuProps['openKeys']>,
                default: () => []
            },
            // 默认选中
            defaultSelectedKeys: {
                type: Array as PropType<MenuProps['selectedKeys']>,
                default: () => []
            }
        },
        setup(props) {
            // ----------------------------------------------------- 属性
            const router = useRouter()
            const openKeys = ref(props.menuExpandedKeysHot)
            const selectedKeys = ref(props.defaultSelectedKeys)
            // ----------------------------------------------------- 监听
            watch(
                () => props.menuExpandedKeysHot,
                val => {
                    openKeys.value = val
                },
                {
                    deep: true
                }
            )
            watch(
                () => props.defaultSelectedKeys,
                val => {
                    selectedKeys.value = val
                },
                {
                    deep: true
                }
            )
            // ----------------------------------------------------- 方法
            // 菜单点击
            const hanldeClickMenu: MenuProps['onClick'] = menu => {
                let path = menu[props.routerPushKey]
                if (import.meta.env.VITE_PUBLIC_PATH && path) {
                    if (path.startsWith(import.meta.env.VITE_PUBLIC_PATH.substring(1))) {
                        path = '/' + path
                    }
                }
                setStorage(CURRENT_URL, path)
                router.push(path)
            }
            return {
                hanldeClickMenu,
                openKeys,
                selectedKeys
            }
        }
    })
</script>

<style lang="less" scoped>
    .al-custom-menu {
        :deep(.submenu-arrow-none) {
            .@{ant-prefix}-menu-submenu-title .@{ant-prefix}-menu-submenu-arrow {
                display: none;
                padding-right: 16px;
            }
        }

        :deep(.@{ant-prefix}-menu-submenu-title) {
            display: flex;
            align-items: center;
        }

        .anticon {
            width: 14px;
            height: 14px;
        }
    }
</style>
<style>
    .icon-style {
        width: 14px;
        height: 14px;
    }
</style>
